<template>
  <div class="home">
    <h2>home当前计数: {{ $store.state.counter }}</h2>
    <button @click="actionCounterBtnClick">发起action修改counter</button>
    <h2>name: {{ $store.state.name }}</h2>
    <button @click="actionNameBtnClick">发起action修改name</button>
  </div>
</template>

<!--option中使用mapGetters-->
<script>
  import {CHANGE_INFO} from '../store/mutation_type.js'
  import { mapMutations } from 'vuex'
  export default {
    methods: {
      actionCounterBtnClick() {
        this.$store.dispatch('incrementAction') //action叫派发,mutation叫提交commit
      },
      actionNameBtnClick() {
        this.$store.dispatch('changeNameAction', 'coderwhy222')
      }
    }
  }
</script>

<!--setup中使用mapGetters-->
<script setup>
  import { useStore,mapState, mapGetters, mapMutations } from 'vuex'
  import { toRefs } from 'vue'
  import { computed } from "vue";
  import useState from "../hooks/useState.js";
  import { CHANGE_INFO } from '../store/mutation_type.js'

  const store = useStore()

</script>

<style scoped>
</style>